<template>
    <view>
        <view class="confirm-dialog">
            <view class="confirm-dialog-title">
                <image v-if="titleIcon && titleIcon !== ''" class="dialog-title-icon" :src="titleIcon" mode="aspectFit"></image>
                <text class="dialog-title">{{title}}</text>
                <image class="dialog-close" src="../../static/ibs/img_comm_close.png" mode="aspectFit" @tap="cancel"></image>
            </view>
            <view class="message-body">
                <image class="dialog-icon" :src="icon" v-if="icon && icon !== ''"></image>
                <text class="dialog-message">{{message}}</text>
            </view>
            <view class="dialog-option">
                <text class="dialog-cancel" @tap="cancel">{{cancelText}}</text>
                <text class="dialog-confirm" @tap="confirm">{{confirmText}}</text>
            </view>
        </view>
        <view class="uni-mask" @tap="cancel"></view>
    </view>
</template>
<script type="text/ecmascript-6">
    export default {
        props: {

            // 对话框的图标
          icon: {
              type: String,
              defalut: ''
          },
            // 标题文字
            titleIcon: {
              type: String,
              default: '../../static/ibs/img_personal_tips.png'
            },
            // 标题文字
            title: {
              type: String,
              default: '确定要关闭该求购吗？'
            },
            // 对话框提示消息
            message: {
                type: String,
                default: '关闭的求购不会在求购中心显示，建议您在交易完成后关闭求购，以免卖家继续联系您。'
            },
            // 对话框的确认按钮显示的文字
            confirmText: {
                type: String,
                default: '确定'
            },
            // 对话框的取消按钮显示的文字
            cancelText: {
                type: String,
                default: '取消'
            },
            // 是否显示取消按钮
            showCancel: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {

            }
        },
        methods: {
            // 点击确定按钮
            confirm() {
                this.$emit('confirm');
            },
            // 点击取消按钮
            cancel() {
                this.$emit('cancel');
            }
        }
    };
</script>
<style>
    /* 遮罩层 */
    .uni-mask {
        background: rgba(0, 0, 0, 0.5);
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 4900;
    }
    .confirm-dialog {
        position: fixed;
        z-index: 5000;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background-color: #FFFFFF;
        width: 560upx;
        height: 540upx;
        border: 1px #e5e5e5 solid;
        border-radius: 8upx;
    }
    .confirm-dialog .confirm-dialog-title {
        height: 116upx;
        line-height: 116upx;
        margin: 0 40upx;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .confirm-dialog .dialog-title {
        width: 100%;
        padding-left: 10upx;
        font-size: 34upx;
        text-align: left;
        color: #077131;
    }
    .confirm-dialog .dialog-title-icon {
        width: 48upx;
        height: 48upx;
    }
    .confirm-dialog .dialog-close {
        width: 48upx;
        height: 48upx;
        float: right;
    }
    .confirm-dialog .message-body {
        padding-top: 40upx;
        padding-right: 40upx;
        padding-left: 40upx;
        border-top: 1upx #e5e5e5 solid;
    }
    .confirm-dialog .dialog-message {
        line-height: 44upx;
        font-size: 28upx;
        color: #1a1a1a;
    }
    .confirm-dialog .dialog-icon {
        height: 110upx;
        width: 110upx;
        text-align: center;
        margin-top: 74upx;
        margin-bottom: 60upx;
    }
    .confirm-dialog .dialog-option {
        display: flex;
        width: 480rpx;
        text-align: center;
        align-items: center;
        justify-content:space-between;
        margin: 0 auto;
        margin-top: 60rpx;

    }
    .confirm-dialog .dialog-confirm {
        width: 230upx;
        height:88upx;
        line-height: 88upx;
        color: #ffffff;
        margin-left: 20upx;
        background-color: #077131;
        font-size: 34upx;
        border-radius: 44upx;
        border: 1px #e5e5e5 solid;
    }
    .confirm-dialog .dialog-cancel {
        width: 230upx;
        height:88upx;
        line-height: 88upx;
        color: #737880;
        background-color: #ffffff;
        font-size: 34upx;
        border-radius: 44upx;
        border: 1px #aeb7c2 solid;
    }
</style>